<script setup>
import user from '@/store/user';
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps({
  title: {
    
  },
  subtitle: {

  },
  is: {
    type: Boolean,
    default: true
  },
  tag: {
    type: Array,
    default: []
  },
  link: {

  }
});

const linkTo = () => {
  router.push(props.link)
}
</script>

<template>
  <div class="title-component">
    <div class="title-left">
      <div>{{ props.title }}</div>
      <span>{{ props.subtitle }}</span>
    </div>

    <div class="title-right">
        <div v-if="props.tag.length">
          <span v-for="item in props.tag" :key="item.id">{{item.name}}</span>
        </div>
       <div v-if="props.is" class="all" @click="linkTo" >查看全部</div>
    </div>
  </div>
</template>

<style lang="scss">
.title-component {
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title-left {
    div {
      display: inline-block;
      font-size: 23px;
      font-weight: 700;
      color: #333;
    }
    span {
      color: #bbb;
      margin-left: 20px;
    }
  }

  .title-right {
    display: flex;

    span{
      padding: 5px 10px;
        border-radius: 3px;

      &:hover{
        background-color: #27ba9b;
      }
    }

    .all{
      position: relative;
      display: inline-block;
      padding: 0 10px 0 20px;
      cursor: pointer;
      // width: 100px;
      &::after{
        content: '';
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 5px;
        height: 5px;
        margin: auto;
        transform: rotate(45deg);
        border-top: 1px solid #bbb;
        border-right: 1px solid #bbb;
      }
    }

  }
}
</style>
